<template>
    <div>
      <tabs v-model="active" title-active-color="red" >
        <tab v-for="{title , to} of tabs" :key="title" :to="to" :title="title" ></tab>
      </tabs>
    </div>
</template>

<script>

import { Tab, Tabs } from "vant";


export default {

  components: {
    Tab,
    Tabs
  },
  data() {
    const tabs = [
      {
        title: "推荐音乐",
        to: "/home/recommend"
      },
      {
        title: "热歌榜",
        to: "/home/hot"
      },
      {
        title: "搜索",
        to: "/home/search"
      }
    ];
    // console.log(this.$route.path)
    const path = this.$route.path;
    const active = tabs.findIndex(({ to }) => {
      return path.includes(to);
    });

    return {
      tabs,
      active
    };
  }
};
</script>

<style lang="scss" scoped>

</style>